<template>
  <div class="lottery-record-container">
    <el-card class="search-card">
      <el-form :model="pagination" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="用户搜索：">
              <el-input
                v-model="pagination.wxnUidPhone"
                placeholder="请输入微信视频、UID、联系方式"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="抽奖类型：">
              <el-select
                v-model="pagination.activityId"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in lotteryTypeOptions"
                  :label="item.activityName"
                  :value="item.activityId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="中奖类型：">
              <el-select
                v-model="pagination.ruleId"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in winTypeOptions"
                  :label="item.ruleName"
                  :value="item.ruleId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item label="时间选择：">
              <el-date-picker
                v-model="pagination.logTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" class="button-group">
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="table-card">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="序号" width="60" />
        <el-table-column prop="userId" label="ID" width="60" />
        <el-table-column prop="userName" label="微信昵称" width="120" />
        <el-table-column prop="phone" label="联系方式" width="150" />
        <el-table-column prop="activityName" label="抽奖类型" width="120" />
        <el-table-column prop="ruleName" label="中奖类型" width="120" />
        <el-table-column prop="rulePrize" label="奖品信息" width="150" />
        <el-table-column prop="logTime" label="抽奖时间" width="180" />
        <el-table-column prop="activityRmk" label="备注" />
        <el-table-column label="Operations">
          <template #default="scope">
            <el-button size="small" @click="toPrize(scope.row)"
              >前往抽奖</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="[2, 3, 4, 5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";
import router from "@/router";

const toPrize = (row) => {
  router.push({
    path: "/prize",
    query: {
      userId: row.userId,
      activityId: row.activityId,
    },
  });
};

// 搜索表单
const searchForm = ref({
  keyword: "",
  lotteryType: "",
  winType: "",
  dateRange: [],
});

// 抽奖类型选项
const lotteryTypeOptions = ref([]);

// 中奖类型选项
const winTypeOptions = ref([]);

// 表格数据
const tableData = ref([]);

// 分页信息
const pagination = ref({
  pageNum: 1,
  pageSize: 6,
  total: 10,
});

// 查询方法
const handleQuery = () => {
  pagination.value.pageNum = 1;
  fetchData();
  ElMessage.success("查询成功");
};

// 重置方法
const handleReset = () => {
  pagination.value = {};
  pagination.value.pageNum = 1;
  pagination.value.pageSize = 6;
  fetchData();
};

// 分页大小改变
const handleSizeChange = (val) => {
  pagination.value.pageSize = val;
  fetchData();
};

// 当前页改变
const handleCurrentChange = (val) => {
  pagination.value.pageNum = val;
  fetchData();
};

// 模拟获取数据
const fetchData = () => {
  // 获取列表数据
  axios.post("/api/activity/activityList", pagination.value).then((res) => {
    if (res.data.code === 200) {
      tableData.value = res.data.data.list;
      pagination.value.total = res.data.data.total;
    } else {
      ElMessage.error(res.data.msg || "查询失败");
    }
  });
  // 获取抽奖类型下拉框
  axios.get("/api/activity/getActivity").then((res) => {
    if (res.data.code === 200) {
      lotteryTypeOptions.value = res.data.data;
    } else {
      ElMessage.error(res.data.msg || "查询失败");
    }
  });
  // 获取中奖类型下拉框
  axios.get("/api/activity/getRule").then((res) => {
    if (res.data.code === 200) {
      winTypeOptions.value = res.data.data;
    } else {
      ElMessage.error(res.data.msg || "查询失败");
    }
  });
};

onMounted(() => {
  // 初始化加载数据
  fetchData();
});
</script>

<style scoped>
.lottery-record-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.table-card {
  margin-bottom: 20px;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
